<template>
    <div class="home">
        <Toolbar />

        <main>
            <!-- 左侧组件列表 -->
            <!-- <section class="left">
                <ComponentList />
            </section> -->
            <div class="left_menus">
                <div class="menu flex">
                        <img class="ysmk"   src="../assets/iconfont/menu_gray.png" alt="">
                     <div class="showmokuai flex"  style="display:none;" @click="showmokuai">
                           <img src="../assets/iconfont/menu_white.png" alt="">
                           <div class="mok">模块</div>
                       </div>
                    </div>
            </div>
          
                <div v-if="modularBool">
                        <ComponentList @closeTK="closeTK"></ComponentList>
                </div>


            <!-- 中间画布 -->
            <section class="center">
                <div
                    class="content"
                    @drop="handleDrop"
                    @dragover="handleDragOver"
                    @mousedown="handleMouseDown"
                    @mouseup="deselectCurComponent"
                >
                    <Editor />
                </div>
            </section>
            <!-- 右侧属性列表 -->
            <section class="right" v-if="right_bool">
                <el-tabs v-model="activeName">
                    <el-tab-pane label="属性" name="attr">
                        <AttrList v-if="curComponent" />
                        <p v-else class="placeholder">请选择组件</p>
                    </el-tab-pane>
                    <el-tab-pane label="动画" name="animation">
                        <AnimationList v-if="curComponent" />
                        <p v-else class="placeholder">请选择组件</p>
                    </el-tab-pane>
                    <el-tab-pane label="事件" name="events">
                        <EventList v-if="curComponent" />
                        <p v-else class="placeholder">请选择组件</p>
                    </el-tab-pane>
                </el-tabs>
                <div class="close_right" @click="closeRight">
                    <i class="el-icon-arrow-right"></i>
                </div>
            </section>
        </main>
    </div>
</template>

<script>
import Editor from '@/components/Editor/index'
// import ComponentList from '@/components/ComponentList' // 左侧列表组件
import ComponentList from '@/components/leftComponent/index' // 左侧列表组件
import AttrList from '@/components/AttrList' // 右侧属性列表
import AnimationList from '@/components/AnimationList' // 右侧动画列表
import EventList from '@/components/EventList' // 右侧事件列表
import componentList from '@/custom-component/component-list' // 左侧列表数据
import Toolbar from '@/components/Toolbar'
import { deepCopy } from '@/utils/utils'
import { mapState } from 'vuex'
import generateID from '@/utils/generateID'
import axios from 'axios'
import { listenGlobalKeyDown } from '@/utils/shortcutKey'
import RealTimeComponentList from '@/components/RealTimeComponentList'

export default {
    components: { Editor, ComponentList, AttrList, AnimationList,RealTimeComponentList, EventList, Toolbar },
    data() {
        return {
            activeName: 'attr',
            modularBool:false,
            right_bool:false,
            reSelectAnimateIndex: undefined,
        }
    },
    computed: mapState([
        'componentData',
        'curComponent',
        'isClickComponent',
        'canvasStyleData',
        'editor',
    ]),
    created() {
        // this.init()
        this.restore()
        // 全局监听按键事件
        listenGlobalKeyDown()
    },
    mounted(){
        this.$EventBus.$on('CLOSEMENU', (e)=>{
            //需要执行的代码
             this.modularBool=e
        })
    },
    methods: {
   
        showmokuai(){//展示模块
            this.modularBool=true
        },
        closeTK(){
            this.modularBool=false
        },
        closeRight(){
            this.right_bool=false
        },
        restore() {
            // 用保存的数据恢复画布
            if (localStorage.getItem('canvasData')) {
                this.$store.commit('setComponentData', this.resetID(JSON.parse(localStorage.getItem('canvasData'))))
            }

            if (localStorage.getItem('canvasStyle')) {
                this.$store.commit('setCanvasStyle', JSON.parse(localStorage.getItem('canvasStyle')))
            }
        },

        resetID(data) {
            data.forEach(item => {
                item.id = generateID()
                if (item.component === 'Group') {
                    this.resetID(item.propValue)
                }
            })

            return data
        },

        handleDrop(e) {
            e.preventDefault()
            e.stopPropagation()
            const index = e.dataTransfer.getData('index')
            const rectInfo = this.editor.getBoundingClientRect()
            if (index) {
                const component = deepCopy(componentList[index])
                component.style.top = e.clientY - rectInfo.y
                component.style.left = e.clientX - rectInfo.x
                component.id = generateID()
                this.$store.commit('addComponent', { component })
                this.$store.commit('recordSnapshot')
            }
        },

        handleDragOver(e) {

            e.preventDefault()
            e.dataTransfer.dropEffect = 'copy'
        },

        handleMouseDown(e) {

            e.stopPropagation()
            this.$store.commit('setClickComponentStatus', false)
            this.$store.commit('setInEditorStatus', true)
        },

        deselectCurComponent(e) {
              this.right_bool=true//右侧栏目出现
            if (!this.isClickComponent) {
                this.$store.commit('setCurComponent', { component: null, index: null })
            }

            // 0 左击 1 滚轮 2 右击
            if (e.button != 2) {
                this.$store.commit('hideContextMenu')
            }
        },
    },
}
</script>

<style lang="scss">
.left_menus{
    // width: 100px;
    height: 200px;
    // background: pink;
    position: fixed;
    padding: 20px;
    top:300px;
    left: 30px;
    z-index: 999;
    .menu{
    align-items: center;
    height: 45px;
    text-align: center;
    width:45px;
    // padding: 10px;
    overflow: hidden;
    align-items: center;
    color: #666;
    border-radius: 100px;
    background: #fff;
    cursor: pointer;
    transition: .1s;
      .ysmk{
        margin:0 auto;
    //    width:35px;
    //    height:35px;
    //    border-radius: 50%;
    //    overflow: hidden;
    }
    .mok{
        font-size: 13px;
        margin-top: 7px;
        margin-left: 4px;
    }
      img{
        width:30px;
        height:30px;
        display: block;
    }
}
}
.menu:hover{
    width:90px;
    padding: 10px;
    border-radius:100px;
    background: #5a75d5;
    color: #fff;
     .ysmk{
        display: none;
     }
    .showmokuai{
        display:flex!important;
    }
}
.close_right{
    position: absolute;
    left: -50px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #eee;
    text-align: center;
    line-height: 38px;
    font-weight: bold;
    top: 50%;
    font-size: 25px;
    cursor: pointer;
}

.home {
    height: 100vh;
    background: #fff;

    main {
        height: calc(100% - 64px);
        position: relative;

        .left {
            position: absolute;
            height: 100%;
            width: 200px;
            left: 0;
            top: 0;
            padding-top: 10px;
        }

        .right {
            position: absolute;
            height: 100%;
            width: 274px;
            background: #fff;
            border-left: 1px solid #5a75d5;
            right: 0;
            top: 0;
        }

        .center {
            // margin-left: 200px;
            // margin-right: 262px;
            background: #f5f5f5;
            height: 100%;
            overflow: auto;
            // padding: 20px;

            .content {
                width: 100%;
                height: 100%;
                overflow: auto;
            }
        }
    }

    .placeholder {
        text-align: center;
        color: #333;
    }
}
</style>
